<template>
    <div class="plan-create">
      <el-form :model="planForm" :rules="rules" ref="planFormRef" label-width="120px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="planForm.name"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker v-model="planForm.startDate" type="date" placeholder="选择开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker v-model="planForm.endDate" type="date" placeholder="选择结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="负责人" prop="responsible">
          <el-input v-model="planForm.responsible"></el-input>
        </el-form-item>
        <el-form-item label="计划描述" prop="description">
          <el-input type="textarea" v-model="planForm.description" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="任务列表">
          <el-table :data="planForm.tasks" style="width: 100%">
            <el-table-column prop="name" label="任务名称" width="180">
              <template #default="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="deadline" label="截止日期" width="180">
              <template #default="scope">
                <el-date-picker v-model="scope.row.deadline" type="date" placeholder="选择截止日期"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="priority" label="优先级" width="180">
              <template #default="scope">
                <el-select v-model="scope.row.priority" placeholder="选择优先级">
                  <el-option label="高" value="high"></el-option>
                  <el-option label="中" value="medium"></el-option>
                  <el-option label="低" value="low"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button size="mini" type="danger" @click="removeTask(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="addTask">添加任务</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交计划</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const planFormRef = ref(null);
      const planForm = ref({
        name: '',
        startDate: '',
        endDate: '',
        responsible: '',
        description: '',
        tasks: []
      });
  
      const rules = ref({
        name: [
          { required: true, message: '请输入计划名称', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        responsible: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入计划描述', trigger: 'blur' }
        ]
      });
  
      const addTask = () => {
        planForm.value.tasks.push({
          name: '',
          deadline: '',
          priority: ''
        });
      };
  
      const removeTask = (index) => {
        planForm.value.tasks.splice(index, 1);
      };
  
      const submitForm = () => {
        planFormRef.value.validate((valid) => {
          if (valid) {
            // 这里可以添加提交表单的逻辑
            ElMessage.success('计划提交成功');
          } else {
            ElMessage.error('请检查表单信息');
            return false;
          }
        });
      };
      const resetForm = () => {
        planFormRef.value.resetFields();
      };
  
      return {
        planFormRef,
        planForm,
        rules,
        addTask,
        removeTask,
        submitForm,
        resetForm
      };
    }
  };
  </script>
  
  <style scoped>
  .plan-create {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(128, 199, 175, 0.115) ;
  }
  </style>
  